<template>
  <div class="app-container">
    <el-card style="position: relative;">
      <div style="position: absolute; right: 25px; top: 20px;">233家公司</div>
      <el-form size="small" :model="searchForm" inline>
        <el-form-item label="公司名称：">
          <el-input v-model="searchForm.taxpayerName" placeholder="请输入公司名称" clearable />
        </el-form-item>
        <el-form-item label="税号：">
          <el-input v-model="searchForm.creditCode" placeholder="请输入税号" clearable />
        </el-form-item>

        <el-form-item label="法人姓名：">
          <el-input v-model="searchForm.legalPerson" placeholder="请输入法人姓名" clearable />
        </el-form-item>
        <el-form-item label="所属省份：">
          <el-select filterable clearable style="width: 200px" v-model="searchForm.provinceId" placeholder="请选择所属省份">
            <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="查询状态：">
          <el-select filterable clearable style="width: 200px" v-model="searchForm.queryStatus" placeholder="请选择查询状态">
            <el-option label="查询中" value="100"></el-option>
            <el-option label="查询成功" value="200"></el-option>
            <el-option label="查询失败" value="300"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询时间：" prop="beginTime">
          <el-date-picker style="width: 200px;" v-model="searchForm.beginTime" align="right" type="date"
            placeholder="选择开始日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item prop="endTime">
          <el-date-picker style="width: 200px" v-model="searchForm.endTime" align="right" type="date"
            placeholder="选择结束日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset()">重置</el-button>
          <el-button icon="el-icon-search" type="primary" @click="handleSearchList()">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="listLoading" :data="tabaleData.data" border style="width: 100%"
        :tree-props="{ children: 'children', hasChildren: 'hasChild' }" row-key="id" lazy :load="load">
        <!-- <el-table-column prop="id" label="序号" type="index" width="50" align="center" /> -->
        <el-table-column prop="taxpayerName" label="公司名称" align="center" />
        <el-table-column prop="creditCode" label="统一信用代码" align="center" />
        <el-table-column prop="legalPerson" label="法人姓名" align="center" />
        <el-table-column prop="phone" label="联系电话" align="center" />
        <el-table-column prop="provinceName" label="所属地区" align="center" />
        <el-table-column prop="createTime" label="查询时间" align="center"></el-table-column>
        <el-table-column prop="source" align="center" label="来源">
        </el-table-column>
        <el-table-column prop="nickname" align="center" label="查询人员">
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.queryStatus == 100" type="info" size="mini">
              查询中</el-tag>
            <el-tag v-if="scope.row.queryStatus == 200" type="success" size="mini">
              查询成功</el-tag>
            <el-tag v-if="scope.row.queryStatus == 300" type="danger" size="mini">
              查询失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.queryStatus == 200" type="text" size="small"
              @click="seeDetail(scope.row)">详情</el-button>
            <el-button v-if="scope.row.queryStatus == 300" type="text" size="small"
              @click="failDetail(scope.row)">查看失败详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageRight" :current-page="searchForm.pageNum" :page-sizes="[10, 20, 50, 100]"
        :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tabaleData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      <dialog-diy :title="'详情'" ref="dialogDiy" @handleClose="handleClose">
        <div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <basic-info v-if="activeName === 'first'" :detail-info="detailInfo" />
            </el-tab-pane>
            <el-tab-pane label="纳税信息" name="second">
              <tax-information v-if="activeName === 'second'" :detail-info="detailInfo" />
            </el-tab-pane>
            <el-tab-pane label="开票信息" name="third">
              <invoice-information v-if="activeName === 'third'" :detail-info="detailInfo" />
            </el-tab-pane>
            <el-tab-pane label="供应商信息" name="fourth">
              <shoper v-if="activeName === 'fourth'" :detail-info="detailInfo" />
            </el-tab-pane>
            <el-tab-pane label="工商司法" name="fifth">
              <gssfInfo v-if="activeName === 'fifth'" :detail-info="detailInfo" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </dialog-diy>
    </el-card>
    <fail-detail ref="failDetail" />
  </div>
</template>

<script>
import failDetail from "./components/failDetail.vue";
import dialogDiy from "../../../components/dialogDiy/index.vue";
import basicInfo from "../components/basicInfo.vue";
import taxInformation from "../components/taxInformation.vue";
import invoiceInformation from "../components/invoiceInformation.vue";
import shoper from "../components/shoper.vue";
import gssfInfo from "../components/gssfInfo.vue";
import { getReportList, getReportCompanyNum } from "@/api/report";
import { detailInfo } from "../../customer/options";
import { getProvinceList } from "@/api/tax";
export default {
  components: {
    dialogDiy,
    basicInfo,
    taxInformation,
    invoiceInformation,
    shoper,
    gssfInfo,
    failDetail
  },
  data() {
    return {
      searchTime: [],
      activeName: "first",
      searchForm: {
        provinceId: "",
        legalPerson: "",
        taxpayerName: "", //模糊搜索字段
        provinceName: "",
        creditCode: "",
        beginTime: "",
        endTime: "",
        pageNum: 1, //当前页
        pageSize: 10, //每页条数
        parentId: 0
      },
      provinceList: [],
      listLoading: false,
      tabaleData: {
        data: [],
        total: 0
      },
      detailInfo: {}
    };
  },
  created() {
    const p1 = getProvinceList();
    const p2 = getReportCompanyNum();
    Promise.all([p1, p2]).then(res => {
      this.provinceList = res[0].data;
      console.log(res[1]);
      this.getList();
    });
  },
  methods: {
    load(tree, treeNode, resolve) {
      let params = {
        pageNum: 1,
        pageSize: 10000,
        parentId: tree.id,
      }
      getReportList(params).then(data => {
        let arr = [];
        data.data.list.forEach(item => {
          let str = {};
          str = item;
          str.hasChildren = true;
          arr.push(str);
        });
        resolve(arr)
      })
    },
    handleSearchList() {

      this.searchForm.pageNum = 1;
      this.$authDate(this.searchForm.beginTime, this.searchForm.endTime, v => {
        if (!v.type) {
          return this.$message.warning(v.msg);
        } else {
          // console.log(this.searchForm);
          this.getList();
        }
      });
    },
    failDetail(v) {
      this.$refs.failDetail.openlog(v);
    },
    handleClose() {
      this.$refs.dialogDiy.handleClose();
      this.activeName = "first";
    },
    reset() {
      this.searchForm = {
        provinceId: "",
        legalPerson: "",
        taxpayerName: "", //模糊搜索字段
        provinceName: "",
        creditCode: "",
        beginTime: "",
        endTime: "",
        pageNum: 1, //当前页
        pageSize: 10 //每页条数
      };
      this.searchTime = [];
      this.getList();
    },
    seeDetail(v) {
      this.detailInfo = v;
      console.log(this.detailInfo);
      this.$refs.dialogDiy.openlog();
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    getList() {

      this.listLoading = true;
      getReportList(this.searchForm)
        .then(res => {
          let arr = [];
          res.data.list.forEach(v => {
            let str = {}
            str = v
            if (v.hasChild) {
              str.hasChildren = true;
            }
            str.children = [];
            arr.push(str);
          });
          this.tabaleData.data = arr;
          this.tabaleData.total = res.data.total;
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-tabs__content {
  height: 70vh;
  overflow: auto;
}
</style>
